<script setup>
import {ref, watch,getCurrentInstance} from 'vue'
const instance = getCurrentInstance();
import Pin from './Pin.vue'
import useNatureSizeStore from "@/store/natureSize.js";
const useNatureSize = useNatureSizeStore()
const props = defineProps({
  mx: {
    type: Number,
    default: 0
  },
  my: {
    type: Number,
    default: 0
  },
  rate:{
    type: Number,
    default: 1
  },
  nodes:{
    type: Array,
    default: [{x: 1050, y: 458, txt: "北京"}]
  }
})
// 需要动态监听mx和my的变化，位置始终是相对图片的位置，需要按照rate的比例进行缩放
// 动态监听nodes的变化
const myNodes = ref([])
watch(() => props.nodes, (newVal) => {
  myNodes.value = newVal
},{
  immediate: true,
  deep:true
})

const rate = ref(useNatureSize.rate)

</script>
<template>
  <div v-for="(node,index) in myNodes" :key="index" style="position: absolute;z-index:100;" :style="{ top: props.my+'px',left: props.mx+'px' }">
    <Pin :posObj="node" :rate="props.rate"/>
  </div>
</template>

<style scoped>

</style>